import React, { useEffect, useState } from 'react'
import style from './style.module.scss'
import StatusView from '../../StatusView'
import AvatarView from '../../AvatarView'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faImage } from '@fortawesome/free-solid-svg-icons'
import { toSimplify } from '../../../utils/Functions'
import { Link } from 'react-router-dom'
import { TopicService } from '../../../transfer/service/TopicService'
import { UserService } from '../../../transfer/service/UserService'

interface ITopicCardProps {
    data: any
    cardWidth: string
}

export default function TopicCard(props: ITopicCardProps) {
    const [num, setNum] = useState<number>()
    const [topicImg, setTopicImg] = useState<any>({})
    const [userProfile, setUserProfile] = useState<any>({})

    useEffect(() => {
        new TopicService().getTopicImg(props.data.id, 0, 100).then(res => {
            setNum(res.data.data.length)
            if (res.data.data.length != 0) setTopicImg(res.data.data[0])
        })
        new UserService().getProfile(props.data.userId).then(res => {
            setUserProfile(res.data.data.profile)
        })
    }, [])

    return (
        <Link
            to={'/topic/' + props.data.id}
            className={style.item}
            style={{
                ['--item-width' as any]: props.cardWidth
            }}>
            <div className={style.img}>
                <div className={style.mask}>
                    <StatusView state={props.data.state} />
                </div>
                {num != 0 ? <img src={'http://localhost:3000/' + topicImg.imageUrl} /> : ''}
            </div>
            <div className={style.info}>
                <div className={style.topic__title}>
                    <div className={style.title}>
                        <p>{props.data.title}</p>
                        <span>
                            by <Link to={'/user/photo/' + props.data.userId}>{userProfile.nickName}</Link>
                        </span>
                    </div>
                    <AvatarView width={'64px'} height={'64px'} img={'http://localhost:3000/' + userProfile.avatar} />
                </div>
                <span className={style.topic__intro}>{props.data.intro}</span>
                <div className={style.topic__contributions}>
                    <FontAwesomeIcon icon={faImage} className={style.img__icon} />
                    <span>{toSimplify(num!)} · 贡献数</span>
                </div>
            </div>
        </Link>
    )
}
